<template>
  <div class="hello">
    <label for="socket.io-client">socket.io-client</label>：
    <input
      name="socket.io-client"
      type="button"
      value="socket.io-client"
      v-on:click="client"
    />
  </div>
</template>


<script>
// socket io client
var socket = require("socket.io-client")("http://localhost:9001/");

const formatter = new Intl.DateTimeFormat("zh-CN", {
  year: "numeric",
  month: "long",
  day: "2-digit",
  hour: "2-digit",
  minute: "2-digit",
  second: "2-digit",
  fractionalSecondDigits: 3, // 包含毫秒
  hour12: false, // 使用24小时制
});

export default {
  name: "HelloWorld",
  components: {},
  computed: {},
  created() {
    // socket client connection
    socket.on("connection", function () {
      console.log("connected!");
      socket.emit("input", "asdasdg");
    });

    // socket client error
    socket.on("error", function (error) {
      console.log("error!"), error;
      socket.emit("error", "asdasdg");
    });

    // socket client echo
    socket.on("echo", function (data) {
      console.log("echo : " + data);
    });

    // socket client disconnect
    socket.on("disconnect", function () {
      console.log("disconnected!");
    });

    // socket client readfile
    socket.on("readfile", function (data) {
      var now = new Date();

      console.log("received:", formatter.format(now));
      console.log("echo : " + JSON.stringify(data));
    });

    console.log("input /exit to exit program.");

    // client to server
    socket.connect();
  },
  props: {
    msg: String,
    formatter: Intl.DateTimeFormat,
  },
  methods: {
    // eslint-disable-next-line
    client(event) {
      var now = new Date();

      console.log("send:", formatter.format(now));
      socket.emit("readFile", { fileName: "123.txt" });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
